<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/css/bootstrap.min.css"/>
</head>
<body>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">增加用户角色</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">用户名:</label>
            <input type="text" class="form-control" id="user_add" disabled>
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">角色选择:</label>
            <select class="form-control" id="role_add">
            <c:forEach var="role" items="${roleList }">
            <option value="${role.id }">${role.description }</option>
            </c:forEach>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="addRole">添加</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">删除用户角色</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">用户名:</label>
            <input type="text" class="form-control" id="user_delete" disabled>
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">角色选择:</label>
            <select class="form-control" id="role_delete">
            <c:forEach var="role" items="${roleList }">
            <option value="${role.id }">${role.description }</option>
            </c:forEach>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="deleteRole">删除</button>
      </div>
    </div>
  </div>
</div>


<h4>用户管理</h4>
<table class="table table-condensed">
   <thead>
      <tr>
         <th>用户名</th>
         <th>用户角色</th>
         <th>用户状态</th>
         <th>角色管理</th>
      </tr>
   </thead>
   <tbody>
    <c:forEach var="user" items="${userList }">
      <tr>
         <td>${user.username}</td>
         <td>
         <c:forEach var="role" items="${user.roles }">
         ${role}&nbsp
         </c:forEach>
         </td>
          <td><c:if test="${user.locked==true}">锁定</c:if>
         <c:if test="${user.locked==false}">正常</c:if></td>
         <td><button type="button" class="btn btn-primary btn-xs" data-toggle="modal" 
         data-target="#addModal" data-user="${user.username }">增加角色</button>
         
		 &nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-xs" 
		 data-toggle="modal" data-target="#deleteModal" data-user="${user.username }">删除角色</button>
		 </td>
      </tr>
     </c:forEach>
   </tbody>
</table>
</body>
<script src="${pageContext.request.contextPath }/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/static/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#addModal').on('show.bs.modal', function (event) {
	  var button = $(event.relatedTarget) // Button that triggered the modal
	  var user = button.data('user') // Extract info from data-* attributes
	  var modal = $(this)
	  modal.find('.modal-body input').val(user)
	})
$("#addRole").click(function(){
	var username = $("#user_add").val();
	var role = $("#role_add").val();
	$.post("addRole",
			{username:username,
			 role:role
			},
			function(data){
				alert(data.message)
			},
			"json");
});

$('#deleteModal').on('show.bs.modal', function (event) {
	  var button = $(event.relatedTarget) // Button that triggered the modal
	  var user = button.data('user') // Extract info from data-* attributes
	  var modal = $(this)
	  modal.find('.modal-body input').val(user)
	})
$("#deleteRole").click(function(){
	var username = $("#user_delete").val();
	var role = $("#role_delete").val();
	$.post("deleteRole",
			{username:username,
			 role:role
			},
			function(data){
				alert(data.message)
			},
			"json");
});
</script>
</html>